<template>
  <a-layout class="login-box">
    <a-layout-header class="login-logo">
      <div class="login-img">
        <img width="56" src="@/assets/img/logo.png" alt="logo" />
        <span class="title">WSY·Admin @1.0.0</span>
      </div>
    </a-layout-header>
    <a-layout-content class="login-content">
      <a-row align="middle" justify="center" class="login-content-main">
        <a-col class="login-content-bgc" :pull="1">
          <img src="@/assets/img/lib.png" width="480" />
          <h2>实验室预约后台管理系统</h2>
          <p style="margin-top: 15px">✨✨✨ 欢迎使用 WSY·Admin @1.0.0</p>
          <p style="margin-top: 15px">
            <a href="https://gitee.com/cricosly/vue-laboratory-reservation-system/stargazers">
              <img
                src="https://gitee.com/cricosly/vue-laboratory-reservation-system/badge/star.svg?theme=dark"
                alt="star" />
            </a>
            <a href="https://gitee.com/cricosly/vue-laboratory-reservation-system/members">
              <img
                src="https://gitee.com/cricosly/vue-laboratory-reservation-system/badge/fork.svg?theme=dark"
                alt="fork" />
            </a>
          </p>
        </a-col>
        <a-col class="login-content-form">
          <div v-show="getShow">
            <h2 class="login-title">登录</h2>
            <a-form
              loading
              :model="formState"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed">
              <a-form-item name="name" :rules="[{ required: true, message: '请输入用户名!' }]">
                <a-input
                  v-model:value="formState.name"
                  allowClear
                  autocomplete="off"
                  size="large"
                  placeholder="用户名">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                <a-input-password
                  v-model:value="formState.password"
                  allowClear
                  autocomplete="off"
                  placeholder="密码"
                  size="large">
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>

              <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
                <div style="display: flex">
                  <a-input
                    v-model:value="formState.code"
                    allowClear
                    autocomplete="off"
                    size="large"
                    placeholder="验证码">
                    <template #prefix>
                      <IconFont type="icon-yanzhengma" style="font-size: 18px" />
                    </template>
                  </a-input>
                  <div class="login-code" v-html="formState.captchaSvg"></div>
                </div>
              </a-form-item>

              <a-form-item>
                <a-form-item name="remember" no-style>
                  <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
                </a-form-item>
              </a-form-item>

              <a-form-item>
                <a-button
                  type="primary"
                  style="width: 100%"
                  :disabled="disabled"
                  html-type="submit"
                  size="large"
                  class="login-form-button">
                  登录
                </a-button>
              </a-form-item>
            </a-form>

            <div>
              <a-space class="login-btn-list">
                <a-button disabled class="login-form-button">注册</a-button>
                <a-button disabled class="login-form-button">其他用户</a-button>
                <a-button disabled class="login-form-button">手机登录</a-button>
                <a-button disabled class="login-form-button">扫二维码登录</a-button>
              </a-space>
            </div>
            <a-divider class="hr">其他方式登录</a-divider>
            <div class="other-login-type">
              <IconFont class="type-item" type="icon-github" />
              <IconFont class="type-item" type="icon-gitee" />
              <IconFont class="type-item" type="icon-weixin" />
              <IconFont class="type-item" type="icon-weibo" />
              <IconFont class="type-item" type="icon-qq" />
            </div>
          </div>
          <!-- 注册组件 -->
        </a-col>
      </a-row>
    </a-layout-content>
    <a-layout-footer class="login-footer">
      <div class="copyright">
        {{ ` Copyright ©${new Date().getFullYear()} by` }}
        <a target="_blank" class="out-link" href="https://gitee.com/cricosly">@不太聪明的椰羊</a>
        . All rights reserved. |
        <a target="_blank" class="out-link" href="https://beian.miit.gov.cn/#/Integrated/index">
          黑ICP备2021213232号-1
        </a>
      </div>
    </a-layout-footer>
  </a-layout>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { loginStore } from '@/stores/user'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { notification } from 'ant-design-vue'
import { users } from '@/datasource/index'
import { loginService } from '@/service/LoginService'
import { useRouter } from 'vue-router'
const router = useRouter()
const { getLoginState, State } = loginStore()
const getShow = computed(() => {
  return getLoginState.value === 'login'
})

// 提前默认输入好到表单中的数据
const formState = State
const onFinish = (values: any) => {
  // 验证用户是否存在于 users 数组中
  const user = users.find(
    (user) => user.name === formState.value.name && user.password === formState.value.password
  )
  // 用户名密码验证
  if (!user) {
    error('用户名或密码错误！')
    return
  }
  // 验证码验证
  if (formState.value.code !== '10') {
    error('验证码错误！')
    return
  }
  // 将用户信息存储到 sessionStorage 中
  loginService(user)

  // 从 sessionStorage 中读取用户信息
  const storedUser = sessionStorage.getItem('user')
  // 检查是否存在存储的用户信息
  if (storedUser) {
    // 存储的用户信息存在，解析为对象
    const user = JSON.parse(storedUser)
    success(`欢迎您! ${user.name}老师`)

    // 输出用户信息
    console.log('从 sessionStorage 中读取的用户信息:', user)
  } else {
    // 没有存储的用户信息,登陆失败
    error('登陆失败！')
    return
  }
  router.push('/index')
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
  if (!formState.value.code) {
    error('验证码为空！')
  }
}

//输入了 账号 + 密码 才能点登录
const disabled = computed(() => {
  return !(formState.value.name && formState.value.password)
})

// 错误提示弹窗
const error = (description: any) => {
  notification.error({
    message: '错误',
    description: description
  })
}
// 错误提示弹窗
const success = (description: any) => {
  notification.success({
    message: '登录成功',
    description: description
  })
}
</script>
<style scoped>
/* 总体框 */
.login-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
}
/* 头部框 尾部框 */
.login-logo,
.login-footer {
  color: #444343;
  background-color: #ffffff;
}

/* head中logo框 */
.login-img {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 1%;
}

/* head中logo框内的文字 */
.title {
  font-weight: bold;
  margin-left: 12px;
  font-size: 1.2rem;
  font-family: 'Baskerville Old Face';
}

/* 主体框 */
.login-content {
  height: 100%;
  /* border: 1px red solid; */
}

/* 主体框内的两个框的容器 */
.login-content-main {
  height: 100%;
  /* border: 1px orange solid; */
}

/* 主体框内左侧 */
.login-content-bgc {
  text-align: center;
  padding-bottom: 100px;
  /* border: 1px blueviolet solid; */
}

/* 主体框内右侧 */
.login-content-form {
  border: 1px solid #e3e3e3;
  padding: 60px;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

/* 右侧的标题 */
.login-title {
  margin-bottom: 30px;
  text-align: center;
}

/* 右侧的表单框 */
.login-form {
  max-width: 100%;
  background-color: #fff;
  overflow: hidden;
}

/* 表单框内的验证码图片悬浮手指 */
.login-code {
  cursor: pointer;
}

/* 按钮框 */
.login-btn-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* 按钮 */
.login-form-button {
  border-radius: 0;
}

/* 其他登录方式分割线 */
.hr {
  font-size: 0.9rem;
  color: #575656;
}

/* 其他登陆方式的框 */
.other-login-type {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 22px;
}

/* 其他登陆方式的图标 */
.type-item {
  cursor: pointer;
}
.type-item:hover {
  color: #d2b48c !important;
}

/* 尾部框  */
.login-footer {
  text-align: center;
  font-size: 0.8rem;
  color: #828181;
}
</style>
